class MultiScreen {
  constructor () {
    const _this = this
    _this.screens = []
    _this.init()
  }

  async init () {
    const _this = this
    if (!('getScreens' in self)) {
      alert('你的chrome版本不支持该功能！')
    } else if ('isMultiScreen' in self && !(await isMultiScreen())) {
      alert('请接入多个显示屏查看该demo！')
    } else {
      const permission = await navigator.permissions.query({
        name: 'window-placement'
      })
      permission.addEventListener('change', () => {
        _this.updateScreensInfo()
      })
      if ('onscreenschange' in self) {
        window.addEventListener('screenschange', () => {
          _this.updateScreensInfo()
        })
        _this.updateScreensInfo()
      }
    }
  }

  async getScreensData () {
    const _this = this
    const Screen = await getScreens()
    if (Screen) {
      _this.screens = Screen.screens
    } else {
      _this.screens = [window.screen]
    }
    console.log('Screen-obj:', Screen)
  }

  async updateScreensInfo () {
    const _this = this
    const buttons = []
    const screens = []

    await _this.getScreensData()

    const permission = await navigator.permissions.query({
      name: 'window-placement'
    })

    if (permission.state === 'denied') {
      document.querySelector('#demo .warning').innerHTML = '您禁用了窗口放置权限，请开启使用'
    }

    _this.screens.forEach((item, index) => {
      buttons.push(`
                <input type="button" value="在第 ${index + 1} 个显示屏中打开" data-index="${index + 1}">
            `)
      screens.push(`
                <dl>
                    <dt>screen ${index + 1} :</dt>
                    <dd>
                        id: ${item.id}<br>
                        width: ${item.width}<br>
                        height: ${item.height}<br>
                        availWidth: ${item.availWidth}<br>
                        availHeight: ${item.availHeight}<br>
                        left: ${item.left}<br>
                        top: ${item.top}<br>
                        primary: ${item.primary}<br>
                        internal: ${item.internal}<br>
                        touchSupport: ${item.touchSupport}<br>
                    </dd>
                </dl>
            `)
    })
    document.querySelector('#demo .buttons').innerHTML = buttons.join('')
    document.querySelector('#demo .screens').innerHTML = screens.join('')
    document.querySelectorAll('#demo input[type="button"]').forEach((item, index) => {
      item.addEventListener('click', () => _this.openWin(index, screens[index]))
    })
  }

  openWin (index, html) {
    const _this = this
    const screen = _this.screens[index]
    const optionsStr = `
            width=${screen.availWidth},
            height=${screen.availHeight},
            left=${screen.availLeft + (screen.availWidth / 2) - 200},
            top=${screen.availTop + (screen.availHeight / 2) - 150}
        `
    const win = window.open('about:blank', '_blank', optionsStr)
    win.document.write(html)
  }
}
export default MultiScreen
